<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <!-- Meta, title, CSS, favicons, etc. -->
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Multiple Cucumber HTML Reporter</title>

    
            <!-- Bootstrap -->
            <link rel="stylesheet" href="../assets/css/bootstrap.min.css" >

            <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
            <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->

            <!--[if lt IE 9]>
            <script src="../assets/js/html5shiv.min.js"></script>
            <script src="../assets/js/respond.min.js"></script>
            <![endif]-->

            <link href="../assets/css/font-awesome.min.css" rel="stylesheet">
    

    <!-- Custom Theme Style -->
    <style type="text/css">
        body {
    color: #73879C;
    background: #F7F7F7;
    font-family: "Helvetica Neue", Roboto, Arial, "Droid Sans", sans-serif;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.471;
}

.main_conainer {
    padding: 10px 20px 0;
}

i span {
    display: none;
}

/* Navigation */
nav.navbar {
    background: #EDEDED;
    border-bottom: 1px solid #D9DEE4;
    margin-bottom: 10px;
}

nav .navbar-brand {
    border-right: 1px solid #D9DEE4;
    color: #5A738E;
}

nav .navbar-text {
    font-size: 18px;
    height: 50px;
    margin-bottom: 0;
    margin-top: 0;
    padding: 15px 0;
}

/* Table */
table {
    width: 100%;
}

table.chart tr th:first-of-type {
    width: 33.333%;
}

.table > thead > tr > th {
    background: #F5F7FA;
}

table.tile h3, table.tile h4, table.tile span {
    font-weight: bold;
    vertical-align: middle !important;
}

table.tile th, table.tile td {
    text-align: center;
}

table.tile th {
    border-bottom: 1px solid #E6ECEE;
}

table.tile td {
    padding: 5px 0;
}

table.tile td ul {
    text-align: left;
    padding-left: 0;
}

table.tile td ul li {
    list-style: none;
    width: 100%;
}

table.tile td ul li a {
    width: 100%;
}

table.tile td ul li a big {
    right: 0;
    float: right;
    margin-right: 13px;
}

table.tile_info {
    width: 100%;
}

table.tile_info td {
    text-align: left;
    padding: 1px;
    font-size: 15px;
}

table.tile_info td p {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin: 0;
    line-height: 28px;
}

table.tile_info td i {
    display: inline-block;
    margin-right: 8px;
    font-size: 17px;
    float: left;
    width: 18px;
    line-height: 28px;
    text-align: center;
}

table.tile_info td:first-child {
    width: 65%;
}

td span {
    line-height: 28px;
}

table.tile_info td.percentage {
    text-align: right;

}

/* chart in table */
table td.chart {
    display: inline-block;
    position: relative;
}

table td.chart #feature-chart,
table td.chart #scenario-chart,
table td.chart .total {
    height: 140px;
    margin: 15px 10px 10px 0;
    width: 140px;
}

table td.chart .total {
    display: inline-block;
    position: absolute;
    font-size: 2em;
    height: 50px;
    line-height: 50px;
    top: 45px;
    left: 45px;
    text-align: center;
    vertical-align: middle;
    width: 50px;
}

/* colors */
.ambiguous-color {
    color: #E74C3C !important;
}

.failed-color {
    color: #E74C3C !important;
}

.not-defined-color {
    color: #F39C12 !important;
}

.passed-color {
    color: #1ABB9C !important;
}

.pending-color {
    color: #FFD119 !important;
}

.skipped-color {
    color: #3498DB !important;
}

/* backgrounds */
.ambiguous-background {
    background: #b73122 !important;
}

.failed-background {
    background: #E74C3C !important;
}

.not-defined-background {
    background: #F39C12 !important;
}

.passed-background {
    background: #1ABB9C !important;
}

.pending-background {
    background: #FFD119 !important;
}

.skipped-background {
    background: #3498DB !important;
}

/* general */
.x_panel {
    position: relative;
    width: 100%;
    margin-bottom: 10px;
    padding: 10px 17px;
    display: inline-block;
    background: #fff;
    border: 1px solid #E6E9ED;
    -webkit-column-break-inside: avoid;
    -moz-column-break-inside: avoid;
    column-break-inside: avoid;
    opacity: 1;
    transition: all .2s ease;
}

.x_title {
    border-bottom: 2px solid #E6E9ED;
    padding: 1px 5px 6px;
    margin-bottom: 10px;
}

.x_title .filter {
    width: 40%;
    float: right;
}

.x_title h2 {
    margin: 5px 0 6px;
    float: left;
    font-size: 24px;
    font-weight: 400;
    display: block;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

.fixed_height_320 {
    height: 320px;
}

.x_title h2 small {
    margin-left: 10px;
}

.x_title span {
    color: #BDBDBD;
}

.x_content {
    padding: 0 5px 6px;
    position: relative;
    width: 100%;
    float: left;
    clear: both;
    margin-top: 5px;
}

.x_content h4 {
    font-size: 16px;
    font-weight: 500;
}

.panel_toolbox {
    float: right;
    margin: 5px 0 0;
    min-width: 70px;
}

.panel_toolbox > li {
    float: right;
}

.panel_toolbox > li > a {
    cursor: pointer;
}

.panel_toolbox > li > a {
    padding: 5px;
    color: #C5C7CB;
    font-size: 14px;
}

.panel_toolbox > li > a:hover {
    background: #F5F7FA;
}

.page-title {
    width: 100%;
    padding: 10px 0 30px 0;
}

.page-title {
    display: block;
}

.page-title h1 {
    margin: 9px 0;
}

.page-title .title_right {
    width: 55%;
    float: left;
    display: block;
}

.page-title .title_right .pull-right {
    margin: 10px 0;
}

.page-title p {
    margin-left: 15px;
}

.dashboard-widget-content {
    padding-top: 9px;
}

.dashboard-widget-content .sidebar-widget {
    width: 50%;
    display: inline-block;
    vertical-align: top;
    background: #fff;
    border: 1px solid #abd9ea;
    border-radius: 5px;
    text-align: center;
    float: right;
    padding: 2px;
    margin-top: 10px;
}

ul.quick-list {
    padding-left: 0;
    display: inline-block;
}

ul.quick-list li,
table.quick-list tr {
    padding-left: 10px;
    list-style: none;
    margin: 0;
    padding-bottom: 6px;
    padding-top: 4px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

ul.quick-list li .meta-data-title,
table.quick-list td.meta-data-title {
    display: inline-block;
    min-width: 75px;
    font-weight: bold;
}

ul.quick-list li span,
table.quick-list td {
    line-height: 28px;
}

ul.quick-list li,
table.quick-list tr {
    border-bottom: 1px solid #efefef;
    padding: 0.5em 0;
}

ul.quick-list li:last-child,
table.quick-list tr:last-child {
    border-bottom: none;
}

ul.quick-list li i {
    padding-right: 10px;
    color: #757679;
}

.screenshot{
    max-height: 100%;
    max-width: 100%;
}

/* Features / Scenarios */
ul.panel_toolbox li .step {
    border-radius: 50%;
    color: #ffffff;
    display: block;
    font-size: 14px;
    height: 30px;
    margin-right: 5px;
    padding: 5px;
    text-align: center;
    width: 30px;
}

.scenario-step-container {
    margin-bottom: 10px;
}

.scenario-step-container .label {
    display: inline-block;
    text-align: center;
    width: 30px;
}

.scenario-step-container .text {
    display: inline;
}

.scenario-step-container .duration {
    position: relative;
    float: right;
}

.scenario-step-container .text .keyword.highlight {
    font-size: 1.2em;
    font-weight: 700;
}

.scenario-scroll-bar {
    overflow-x: scroll;
}

.scenario-step-collapse,
.scenario-scroll-bar .arguments {
    margin-left: 30px;
    width: auto;
}

/* media */
@media (max-width: 1200px) {
    .x_title h2 {
        width: 70%;
    }
}

@media (max-width: 640px) {
    .x_title h2 {
        width: 100%;
    }
}

/* override */
table.dataTable.dtr-inline.collapsed > tbody > tr > td:first-child:before,
table.dataTable.dtr-inline.collapsed > tbody > tr > th:first-child:before {
    background-color: #1ABB9C;
}

table.dataTable.dtr-inline.collapsed > tbody > tr.parent > td:first-child:before, table.dataTable.dtr-inline.collapsed > tbody > tr.parent > th:first-child:before {
    background-color: #E74C3C;
}

.created-by {
    padding: 50px 0;
    text-align: center;
}

        
    </style>
</head>
<body>

    <nav class="navbar">
        <div class="container-fluid">
            <p class="navbar-text">Multiple Cucumber HTML Reporter</p>
            <div class="navbar-header">
                <a class="navbar-brand" href="#" onclick="history.back(-1)">
                    <i class="fa fa-arrow-left"><span>Back</span></i>
                </a>
            </div>
            <p class="navbar-text">Feature:
                <small>As a user,I want to visit github project.</small>
            </p>
        </div>
    </nav>

    <div class="main_conainer">

        <div class="page-title">
            <div class="tags">
                
                
                
                <i class="fa fa-tags fa-lg"></i>
                <span class="tag">hotlink</span><span class="tag">login</span>
                
                
            </div>
            <h1>Feature:
                <small>As a user,I want to visit github project.</small>
            </h1>
            <p></p>
        </div>

        <div class="clearfix"></div>

        <div class="row">
            <div class="col-md-8 col-xs-12">
                <div class="x_panel fixed_height_320">
                    <div class="x_title">
    <h2>Scenarios</h2>
    <ul class="nav navbar-right panel_toolbox">
        <li>
            <a class="collapse-link">
                <i class="fa fa-chevron-up"></i>
            </a>
        </li>
    </ul>
    <div class="clearfix"></div>
</div>
<div class="x_content">
    <table class="chart">
        <tr>
            <th>
                <p>Chart</p>
            </th>
            <th>
                <div class="col-lg-7 col-md-7 col-sm-7 col-xs-7">
                    <p class="">Status</p>
                </div>
                <div class="col-lg-5 col-md-5 col-sm-5 col-xs-5">
                    <p class="">Progress</p>
                </div>
            </th>
        </tr>
        <tr>
            <td class="chart">
                <canvas id="scenario-chart"></canvas>
                <div class="total">1</div>
            </td>
            <td>
                <table class="tile_info">
                    <tr>
                        <td>
                            <p data-toggle="tooltip" data-placement="left" title="Scenario passed">
                                <i class="fa fa-check-circle passed-color"></i>
                                Passed
                            </p>
                        </td>
                        <td class="percentage">100.00 %</td>
                    </tr>
                    <tr>
                        <td>
                            <p data-toggle="tooltip" data-placement="left" title="Scenario failed">
                                <i class="fa fa-exclamation-circle failed-color"></i>
                                Failed
                            </p>
                        </td>
                        <td class="percentage">0.00 %</td>
                    
                    
                    </tr>
                    
                    
                </table>
            </td>
        </tr>
        
    </table>
</div>

                </div>
            </div>
            
            <div class="col-md-4 col-xs-12">
                <div class="x_panel fixed_height_320">
                    <div class="x_title">
    <h2>Metadata</h2>
    <ul class="nav navbar-right panel_toolbox">
        <li>
            <a class="collapse-link">
                <i class="fa fa-chevron-up"></i>
            </a>
        </li>
    </ul>
    <div class="clearfix"></div>
</div>
<div class="x_content">
    <div class="dashboard-widget-content">
        <ul class="quick-list">
            <li>
                <span class="meta-data-title">
                    <i class="fa fa-desktop fa-lg"></i>
                    <i class="fa fa-mobile fa-lg"></i>
                </span>
                <span class="meta-data-data">
                    
                    
                    
                    
                    <i class="fa fa-desktop fa-lg">
                        <span>desktop</span>
                    </i>
                </span>
            </li>
            <li>
                <span class="meta-data-title">Device</span>
                <span class="meta-data-data">Docker test machine</span>
            </li>
            <li>
                <span class="meta-data-title">OS</span>
                <span class="meta-data-data">
                    
                    
                    
                    
                    <i class="fa fa-linux fa-lg">
                        <span>linux</span>
                    </i>
                    18.04
                </span>
            </li>
            
            
            <li>
                <span class="meta-data-title">Browser</span>
                <span class="meta-data-data">
                    
                    
                    
                    
                    <i class="fa fa-chrome fa-lg">
                        <span>chrome</span>
                    </i>
                    94.0.4595.0
                </span>
            </li>
            
        </ul>
    </div>
</div>

                </div>
            </div>
            
        </div>

        <div class="row">
            
    <div class="col-md-12 col-sm-12 col-xs-12">
        <div class="x_panel" style="height: auto;">
            <div class="x_title">

                <div class="tags">
                    
                        
                        
                    
                </div>

                <h2>Scenario: <small>Sean wants to visit github project.</small></h2>

                <ul class="nav navbar-right panel_toolbox">
                    <li>
                        <a class="collapse-link"><i class="fa fa-chevron-down"></i></a>
                    </li>

                    

                    

                    

                    

                    
                        <li>
                            <span class="step passed-background" data-toggle="tooltip" title="Scenario passed">1</span>
                        </li>
                    

                    

                    
                </ul>

                <div class="clearfix"></div>
            </div>

            <div class="x_content" style="display: none;">
                <div class="scenario-step-container"></div>
                    
                        
                            <div class="scenario-step-container">

                                
                                    
                                        <div class="label" title="Success">
                                            <i class="fa fa-check-circle fa-2x passed-color" data-toggle="tooltip" data-placement="top" title="Step passed"></i>
                                        </div>
                                    
                                

                                <div class="text">
                                    <span class="keyword highlight">When</span>

                                    
                                        Sean visits github project
                                        
                                    

                                    

                                </div>

                                
                                    

                                    

                                    

                                    

                                    

                                    
                                
                            </div>

                        
                            

                            

                            

                            

                            

                            
                        

                        

                    
                
            </div>
        </div>
    </div>


        </div>
    </div>

    
        <div class="created-by">
            <p>Created by wswebcreation. Find me on:</p>
            <a href="http://www.wswebcreation.nl/" target="_blank"><i class="fa fa-rss-square fa-2x"></i></a>
            <a href="https://github.com/wswebcreation/" target="_blank"><i class="fa fa-github-square fa-2x"></i></a>
            <a href="http://nl.linkedin.com/in/wimselles" target="_blank"><i class="fa fa-linkedin-square fa-2x"></i></a>
            <a href="http://stackoverflow.com/users/5911978/wswebcreation" target="_blank"><i class="fa fa-stack-overflow fa-2x"></i></a>
        </div>
    

    
        <script src="../assets/js/jquery-3.2.1.min.js"></script>
        <script src="../assets/js/bootstrap.min.js"></script>
        <script src="../assets/js/Chart.min.js"></script>
    

    <!-- Custom -->
    <script>
        $(document).ready(function () {

            var scenarioOptions = {
                legend: false,
                responsive: false
            };

            new Chart(document.getElementById("scenario-chart"), {
                type: 'doughnut',
                tooltipFillColor: "rgba(51, 51, 51, 0.55)",
                data: {
                    labels: [
                        "Passed",
                        "Failed",
                        "Pending",
                        "Skipped",
                        "Ambiguous",
                        "Not defined"
                    ],
                    datasets: [{
                        data: [
                            1,
                            0,
                            0,
                            0,
                            0,
                            0
                        ],
                        backgroundColor: [
                            "#26B99A",
                            "#E74C3C",
                            "#FFD119",
                            "#3498DB",
                            "#b73122",
                            "#F39C12"
                        ]
                    }]
                },
                options: scenarioOptions
            });

            $('.x_title').on('click', function () {
    var $BOX_PANEL = $(this).closest('.x_panel'),
        $ICON = $(this).find('.collapse-link i'),
        $BOX_CONTENT = $BOX_PANEL.find('.x_content');

    // fix for some div with hardcoded fix class
    if ($BOX_PANEL.attr('style')) {
        $BOX_CONTENT.slideToggle(200, function () {
            $BOX_PANEL.removeAttr('style');
        });
    } else {
        $BOX_CONTENT.slideToggle(200);
        $BOX_PANEL.css('height', 'auto');
    }

    $ICON.toggleClass('fa-chevron-up fa-chevron-down');
});

$('body').tooltip({
    selector: '[data-toggle="tooltip"]'
});
        });
    </script>
</body>
</html>
